$(function () {
  // 2- 首页数据渲染 
  // 1-ajax去后台获取用户数据 
  // 2-使用模板引擎渲染数据

  var currentPage = 1; // 记录当前页 
  var pageSize = 5; // 每页条数

  // 去后台获取数据 并渲染方法 
  function render () {
    $.ajax({
      type: 'get',
      url: '/user/queryUser',
      data: {
        page: currentPage,
        pageSize: pageSize
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        //渲染 
        $('tbody').html(template('tmp', res));
        // res.total 数据库真实数据总数 
        setPage(res.total);
      }

    })
  }

  render();



  // 3- 禁用启用
  // 1- 点击禁用/启用按钮 ，弹出确认框 
  // 2- 获取当前数据id
  // 3- 获取当前数据要进行操作（禁用/启用） 
  // 4- 如果用户点击确认框 确定按钮， 向后台发送ajax请求，进行操作
  // 5- 操作完成后，页面从新渲染，隐藏模态框 
  var id = null;
  var isDelete = null;
  $('tbody').on('click', '.btn-exec', function () {
    // 获取当前数据id
    // id = $(this).parent().attr('data-id');
    id = $(this).parent().data('id');
    // 获取当前数据要进行操作（禁用/启用） 
    isDelete = $(this).hasClass('btn-danger') ? 0 : 1;
    console.log(id, isDelete);
  })

  // 4- 如果用户点击确认框 确定按钮， 向后台发送ajax请求，进行操作
  // 5- 操作完成后，页面从新渲染，隐藏模态框 
  $('.btn-ok').click(function () {
    $.ajax({
      type: 'post',
      url: '/user/updateUser',
      data: {
        id: id,
        isDelete: isDelete
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 页面从新渲染
        render();
        // 隐藏模态框 
        $('.modal-user').modal('hide');
      }
    })
  })

  // 4- 分页功能 
  // total 数据库数据的总数 
  function setPage (total) {
    // 使用分页插件 生成分页按钮 
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage, // 设置当前 高亮 的页面小按钮 
      totalPages: Math.ceil(total / pageSize),//总页数
      onPageClicked: function (event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮对应页码 
        console.log(page);
        // 改变当前页取值 
        currentPage = page;
        // 页面重新渲染
        render();
      }
    });
  }



})